<script>
import {CreateTechStack, DeleteTechStack} from "../api/setting.js";
import ImageUploader from "../components/ImageUploader.vue";
import {CreateSchool, DeleteSchool, UpdateSchool} from "../api/school.js";
import {mapActions, mapState} from "vuex";
export default {
  name: "SettingsPage",
  components: {ImageUploader},
  data() {
    return {
      img: '',
      saved: false,
      stackStyle: '',
      stackName: '',
      imageTest: '',
      showTag: false,
      activeStack: {
        name:'',
        style: '',
      },
      activeSchool: {
        isSchool985:false,
        isSchool211: false,
        name: '',
        logo: ''
      },
      schoolName: '',
      schoolLogo: '',
      isSchool985: false,
      isSchool211: false,
      showAddTechStackDrawer: false,
      showEditTechStackDrawer:false,
      showAddSchoolDrawer: false,
      showEditSchoolDrawer: false,
    }
  },
  computed: {
    ...mapState(['schools', 'stacks'])
  },
  methods: {
    ...mapActions(['updateSchools', 'updateStacks']),
    async addTechStack() {
      const payload = {
        name: this.stackName,
        style: this.stackStyle,
      }
      const res = await CreateTechStack(payload)
      if(res.data.code === 200) {
        await this.updateStack()
      }
    },
    onStackSelected(stack) {
      this.activeStack = stack
      this.showEditTechStackDrawer = true
    },
    async updateStack() {
      console.log(this.activeStack);
    },
    async deleteStack() {
      const res = await DeleteTechStack(this.activeStack.id)
      if(res.data.code === 200) {
        await this.updateStack()
        this.showEditTechStackDrawer = false
      }
    },
    async addSchool() {
      const payload = {
        name: this.schoolName,
        logo: this.schoolLogo,
        is985:this.isSchool985,
        is211: this.isSchool211
      }
      const res = await CreateSchool(payload)
      if(res.data.code === 200) {
        await this.updateSchools()
        this.showAddSchoolDrawer = false
      }
    },
    schoolSelected(school) {
      this.activeSchool = school;
      this.showEditSchoolDrawer = true
    },
    async deleteSchool() {
      const res = await DeleteSchool(this.activeSchool.id)
      if(res.data.code === 200) {
        await this.updateStacks()
        this.showEditSchoolDrawer = false;
      }
    },
    async saveSchool() {
      const res = await UpdateSchool(this.activeSchool.id, this.activeSchool)
      if(res.data.code === 200) {
        await this.updateSchools()
        this.showEditSchoolDrawer = false
      }
    }
  },
  mounted() {
    this.updateStacks()
    this.updateSchools()
  }
}
</script>

<template>
  <div class="flex justify-center">
    <el-drawer v-model="showAddTechStackDrawer">
      <template #header>添加科技树</template>
      <template #default>
        <div class="flex flex-col">
          <i class="w-[120px] h-[120px] bg-white border text-8xl rounded mb-2 flex justify-center items-center" :class="stackStyle"/>
          <el-input type="text" placeholder="名称" v-model="stackName"/>
          <el-input type="text" placeholder="样式" v-model="stackStyle" class="mt-2"/>
          <el-button type="primary" @click="addTechStack" class="w-full mt-2">保存</el-button>
        </div>
      </template>
    </el-drawer>
    <el-drawer v-model="showEditTechStackDrawer">
      <template #header>{{activeStack.name}}</template>
      <template #default>
        <div class="flex flex-col h-full">
          <div>
            <el-text type="info">图标预览</el-text>
            <i class="w-[120px] h-[120px] bg-white border text-8xl rounded mb-2 flex justify-center items-center" :class="activeStack.style"/>
          </div>
          <div class="mt-4">
            <el-text type="info">技术栈名称</el-text>
            <el-input type="text" placeholder="名称" v-model="activeStack.name"/>
          </div>
          <div class="my-4">
            <el-text type="info">技术栈样式</el-text>
            <el-input type="text" placeholder="样式" v-model="activeStack.style" class="mt-2"/>
          </div>
          <el-button type="primary" @click="updateStack" class="w-full mt-2">更新</el-button>
          <el-button type="danger" class="mt-auto" @click="deleteStack">删除</el-button>
        </div>
      </template>
    </el-drawer>
    <el-drawer v-model="showAddSchoolDrawer" title="添加学校">
      <div class="h-full flex flex-col">
        <div>
          <el-text>学校LOGO</el-text>
          <image-uploader v-model="schoolLogo" class="mt-2"/>
        </div>

        <div class="mt-4">
          <el-text>学校名称</el-text>
          <el-input v-model="schoolName" placeholder="请输入学校名称"/>
        </div>

        <div class="mt-4">
          <el-text>211</el-text>
          <el-switch v-model="isSchool211" class="ml-2"/>
        </div>

        <div class="mt-4">
          <el-text>985</el-text>
          <el-switch v-model="isSchool985" class="ml-2"/>
        </div>

        <div class="mt-4">
          <el-button @click="addSchool" type="primary" class="w-full" size="large">添加</el-button>
        </div>
      </div>
    </el-drawer>
    <el-drawer v-model="showEditSchoolDrawer" title="编辑学校">
      <div class="h-full flex flex-col">
        <div>
          <el-text>学校LOGO</el-text>
          <image-uploader v-model="activeSchool.logo" class="mt-2"/>
        </div>

        <div class="mt-4">
          <el-text>学校名称</el-text>
          <el-input v-model="activeSchool.name" placeholder="请输入学校名称"/>
        </div>

        <div class="mt-4">
          <el-text>211</el-text>
          <el-switch v-model="activeSchool.is211" class="ml-2"/>
        </div>

        <div class="mt-4">
          <el-text>985</el-text>
          <el-switch v-model="activeSchool.is985" class="ml-2"/>
        </div>

        <div class="mt-4">
          <el-button @click="saveSchool" type="primary" class="w-full" size="large">保存</el-button>
        </div>

        <div class="mt-auto">
          <el-popconfirm @confirm="deleteSchool" title="您确认删除吗?" icon="Warning">
            <template #reference>
              <el-button  type="danger" class="w-full">删除</el-button>
            </template>
          </el-popconfirm>
        </div>
      </div>
    </el-drawer>
    <div class="w-[1200px] py-2">
      <div class="w-full min-h-[100px] bg-white rounded-2xl p-4 py-2 mt-5 shadow">
        <div class="p-5 flex">
          <span class="text-2xl font-bold">技术栈</span>
          <div class="ml-auto">
            <span class="text-[0.8em] mr-1 text-gray-400">标签模式</span>
            <el-switch v-model="showTag"/>
          </div>
        </div>
        <div class="flex flex-wrap">
          <div @click="onStackSelected(stack)" v-for="(stack, idx) in stacks" :key="idx" class="m-1 hover:bg-gray-100 min-w-[80px] transition-all cursor-pointer">
            <div v-if="!showTag" class="flex flex-col justify-center items-center m-1 mx-2">
              <i class="text-2xl overflow-hidden" :class="stack.style"></i>
              <div class="text-center text-[0.8em]">
                {{stack.name}}
              </div>
            </div>
            <div v-if="showTag" class="flex border-2 rounded-full px-2 py-1 items-center mx-1">
              <i class="" :class="stack.style"/>
              <div class="text-[0.8em] ml-1">{{stack.name}}</div>
            </div>
          </div>
          <div v-if="!showTag" class="h-[70px] flex items-center ml-2">
            <el-button icon="Plus" circle @click="showAddTechStackDrawer=true"/>
          </div>
          <div v-else class="flex items-center ml-2">
            <el-button icon="Plus" circle @click="showAddTechStackDrawer=true"/>
          </div>
        </div>
      </div>
      <div class="w-full min-h-[100px] bg-white rounded-2xl p-4 py-2 mt-5 shadow pb-5">
        <div class="p-5 flex">
          <span class="text-2xl font-bold">学校</span>
        </div>
        <div class="flex">
          <div @click="schoolSelected(school)" v-for="(school, idx) in schools" :key="idx" class="mr-2">
            <div class="flex items-start shadow-md rounded-full pr-4 border hover:shadow-xl transition-all cursor-pointer">
              <img :src="school.logo" class="w-[70px] h-[70px] rounded-full border object-fill" alt="">
              <div class="ml-2 px-2 flex flex-col h-[70px] justify-center">
                <div class="font-bold">{{school.name}}</div>
                <div class="space-x-2">
                  <el-tag size="small">211</el-tag>
                  <el-tag size="small">985</el-tag>
                </div>
              </div>
            </div>
          </div>
          <div class="flex items-center ml-2 px-2">
            <el-button  icon="Plus" circle @click="showAddSchoolDrawer=true"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>